<!-- vista para el logueo en SIRE911-->
<div class="span-24">
    <div class="span-24 barra ui-corner-top" style="height:70px"></div>
    <div id="login" class="ui-widget-content span-24 last" style="height:300px">
        <br>
        <br>
        <br>
        <br>
        <div id="cuadro" class="span-11 push-2 ui-corner-all">
            <div class="ui-widget-header ui-corner-all">
                <h3>Identificación de Usuario</h3>
            </div>
            <hr class="space">
            <form id="formlogin" action="#" method="post">
                <div class="span-11 last">
                    <div class="span-5">
                        <p for="nick" align="right"><strong>Usuario:</strong>
                        </p>
                    </div>
                    <div class="span-5">
                        <p>
                            <input class="txtBox" name="nick" id="nick" value= "" width="280" />
                        </p>
                    </div>
                </div>
                <div class="span-11 last" style="margin-top:-10px">
                    <div class="span-5">
                        <p for="clave" align="right"> <strong>Contraseña:</strong>
                        </p>
                    </div>
                    <div class="span-6 last">
                        <p>
                            <input type="password" class="txtBox" name="clave" id="clave" value= ""  width="280" />
                        </p>
                    </div>
                    <div class="span-2 prepend-7 last" style="margin-left:10px; margin-top:-15px">
                        <p>
                            <input type="submit" name="submit" id="submit"  value="Entrar" class="login" />
                        </p>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<div class="span-24 barra ui-corner-bottom" style="height:70px"></div>
<script type="text/javascript">

    $.blockUI.defaults.growlCSS.backgroundColor = '#2BA54E';
    $.blockUI.defaults.growlCSS.opacity = 1;
    $.blockUI.defaults.growlCSS.left = $('#formlogin').offset().left+450;
    $.blockUI.defaults.growlCSS.top = $('#formlogin').offset().top - 10;

    $(function() {

        $('#nick').focus();

        //para que el formulario se envie automaticamente al presionar Enter en un cuadro
        $('input').keydown(function(e) {
            if (e.keyCode == 13) {
                $(this).parents('form').submit();
                return false;
            }
        });

        $('#formlogin').submit(function(e) {
            e.preventDefault();
            var forma = $(this);
            var nick = $('#nick');
            if (nick.val() == '') {
                $.growlUI(' ', 'Debe introducir un nombre de usuario');
                nick.focus();
                return false;
            }



            var clave = $('#clave');
            if (clave.val() == '') {
                $.growlUI(' ', 'Debe introducir su contraseña');
                clave.focus();
                return false;
            } 

            forma.block({
                message: '<strong>&nbsp;Espere&nbsp;<br><img src="./images/loader.gif"></strong>',
                css: {
                    border: '1px solid #a00'
                }
            });

            $.post( <?php echo '"' . site_url('usuarios/checklogin') . '"'; ?>, forma.serialize(),
            function(data) {
                if (data.resultado != 'ok') {
                    $.growlUI('', data.mensaje);
                    forma.effect("shake", {
                        times: 3
                    },
                    300,
                    function() {
                        clave.focus();
                    });
                } else {
                    redirect_to('usuarios/showcontrolpanel');
                }
            },
            "json");

            forma.unblock();
        });

        $('#submit').button();

    });
</script>

<style>
    form label.error { font-size:smaller; padding:0; margin-bottom:0; display:block}
    form input.error { padding:0; margin-bottom:0}
    table {margin-bottom:0;}
    #confirmacioncorreo span {color:blue}
    #cuadro {border:1px solid silver; padding:5px;}
</style>

